<script setup lang='ts'>
import { ref } from 'vue'
import {
  getMemberAddressByIdAPI, getPatientFileByIdAPI,
  postMemberAddFileAPI,
  putMemberAddressByIdAPI,
} from '@/services/docter/medical'
import { onLoad } from '@dcloudio/uni-app'
import { useMemberStore } from '@/stores'
const memberStore = useMemberStore()
const profile = memberStore.profile

// 表单数据
const form = ref({
  patientId: '', // 患者ID
  emergencyContactName: '', // 紧急联系人
  emergencyContactPhone: '', // 紧急联系人电话
  emergencyContactRelation: '', //爸爸,妈妈,儿子,女儿,亲戚,朋友
  leftEarHearing: '', // 左耳听力 正常  耳聋
  rightEarHearing: '', // 右耳听力 正常  耳聋
  leftVision: 0, // 左眼视力
  rightVision: 0, // 右眼视力
  height: 0, // 身高
  weight: 0, // 体重
  bloodType: '', // 血型 A  B  AB  O    R-阴 RH-阳
  personalInfo: '', // 个人史
  familyInfo: '', // 家族史
})

// 定义校验规则
const rules: UniHelper.UniFormsRules = {
  emergencyContactName: {
    rules: [{ required: true, errorMessage: '请输入紧急联系人姓名' }],
  },
  emergencyContactPhone: {
    rules: [
      { required: true, errorMessage: '请输入紧急联系人联系方式' },
      { pattern: /^1[3-9]\d{9}$/, errorMessage: '手机号格式不正确' },
    ],
  },
}

// 获取表单组件实例，属于调用表单方法
const formRef = ref<UniHelper.UniFormsInstance>()
// 动态获取页面参数
const query = defineProps<{
  id?: string
}>()

// 动态设置标题
uni.setNavigationBarTitle({ title: query.id ? '修改信息' : '新建信息' })

// 获取患者信息的详情数据
const getMemberAddressByIdData = async () => {
  // 有id才调用接口
  if (query.id) {
    // 发送请求
    const res = await getPatientFileByIdAPI(query.id)
    // 把数据合并到表单中
    Object.assign(form.value, res.data)
  }
}
// 页面加载
onLoad(() => {
  getMemberAddressByIdData()
})
console.log(form);
// 提交按钮
const onsubmit = async () => {
  try {
    // 表单校验
    if (!formRef.value) {
      throw new Error("Form reference is not defined");
    }
    // 判断当前页面是否有地址id
    if (query.id) {
      // 修改地址请求
      await putMemberAddressByIdAPI( form.value)
      await uni.showToast({ icon: 'success', title: '修改成功' })
    } else {
      // 新建详细信息请求
      form.value.patientId= profile?.patientId
      console.log(form.value);
      await postMemberAddFileAPI(form.value)
      // 成功提示
      await uni.showToast({ icon: 'success', title: '添加成功' })
    }
    // 返回上一页
    setTimeout(() => {
      uni.navigateBack()
    }, 400)
  } catch (error) {
    await uni.showToast({ icon: 'error', title: '请填写完整信息' })
  }
}
</script>

<template>
  <view class='content'>
    <uni-forms :rules='rules' :model='form' ref='formRef' label-position='left'>
      <!-- 表单内容 -->
      <uni-forms-item name='emergencyContactName' class='form-item'>
        <text class='label'>紧急联系人</text>
        <input
          class='input'
          placeholder='请填写紧急联系人姓名'
          v-model='form.emergencyContactName'
        />
      </uni-forms-item>
      <uni-forms-item name='emergencyContactPhone' class='form-item'>
        <text class='label'>紧急手机号码</text>
        <input
          class='input'
          placeholder='请填写紧急联系人手机号码'
          v-model='form.emergencyContactPhone'
        />
      </uni-forms-item>
      <view class='form-item'>
        <text class='label'>人物关系</text>
        <input
          class='input'
          placeholder='请填写与患者的关系'
          v-model='form.emergencyContactRelation'
        />
      </view>
      <view class='form-item'>
        <text class='label'>左耳听力</text>
        <input class='input' placeholder='请填写' v-model='form.leftEarHearing' />
        <text class='label'>右耳听力</text>
        <input class='input' placeholder='请填写' v-model='form.rightEarHearing' />
      </view>
      <view class='form-item'>
        <text class='label'>左眼视力</text>
        <input class='input' placeholder='请填写' v-model='form.leftVision' />
        <text class='label'>右眼视力</text>
        <input class='input' placeholder='请填写' v-model='form.rightVision' />
      </view>
      <view class='form-item'>
        <text class='label'>身高</text>
        <input class='input' v-model='form.height' />
        <text class='label'>体重</text>
        <input class='input' v-model='form.weight' />
      </view>
      <view class='form-item'>
        <text class='label'>身血型</text>
        <input class='input' placeholder='A B AB C ' v-model='form.bloodType' />
      </view>

      <view class='form-item'>
        <text class='label'>个人史</text>
        <input class='input' v-model='form.personalInfo' />
      </view>
      <view class='form-item'>
        <text class='label'>家族史</text>
        <input class='input' v-model='form.familyInfo' />
      </view>
    </uni-forms>
  </view>
  <!-- 提交按钮 -->
  <button @tap='onsubmit' class='button'>保存</button>
</template>

<style lang='scss' scoped>
page {
  background-color: #f4f4f4;
}

.content {
  margin: 20rpx 20rpx 0;
  padding: 0 20rpx;
  border-radius: 10rpx;
  background-color: #fff;

  .form-item,
  .uni-forms-item {
    display: flex;
    align-items: center;
    min-height: 96rpx;
    padding: 25rpx 10rpx 40rpx;
    background-color: #fff;
    font-size: 28rpx;
    border-bottom: 1rpx solid #ddd;
    position: relative;
    margin-bottom: 0;

    // 调整 uni-forms 样式
    .uni-forms-item__content {
      display: flex;
    }

    .uni-forms-item__error {
      margin-left: 200rpx;
    }

    &:last-child {
      border: none;
    }

    .label {
      width: 200rpx;
      color: #333;
    }

    .input {
      flex: 1;
      display: block;
      height: 46rpx;
    }

    .switch {
      position: absolute;
      right: -20rpx;
      transform: scale(0.8);
    }

    .picker {
      flex: 1;
    }

    .placeholder {
      color: #808080;
    }
  }
}

.button {
  height: 80rpx;
  margin: 30rpx 20rpx;
  color: #fff;
  border-radius: 80rpx;
  font-size: 30rpx;
  background-color: #27ba9b;
}
</style>
